<template>
  <div class="app">
    <NavList :navlist="tablist" :curIndex="curIndex" @change="changetab"/>
    <List :list="tablist[curIndex].songs"/>
  </div>
</template>

<script>
import List from './components/List.vue'
import NavList from './components/NavList.vue'

export default {
  data() {
    return {
      curIndex:0,
      tablist:[
        { title: '周杰伦', songs: ['青花瓷', '七里香', '夜曲', '晴天'] },
        { title: '薛之谦', songs: ['演员', '刚刚好', '暧昧', '像风一样'] },
        { title: '许嵩', songs: ['玫瑰花的葬礼', '有何不可', '多余的解释', '断桥残雪'] }

      ]
    }
  },
  methods:{
    changetab(i){
      this.curIndex = i
    }
  },
  // 注册组件
  components:{
    List,
    NavList
  }
}
</script>



<style lang='scss'>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

</style>